Day7 CSS簡介

2024 iThome 鐵人賽

DAY 7

自我挑戰組

從零開始的ＨＴＭＬ系列第 7 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-08-18 23:28:51

100 瀏覽

分享至

CSS為Cascading Style Sheets的縮寫，是一種用來控制網頁外觀的樣式語言，專門負責描述HTML或XML文件的展示方式。它與HTML的結構相輔相成，讓開發者能夠將內容與樣式分離，從而提升網站的靈活性、可維護性以及使用者體驗。CSS可以控制網頁的佈局、顏色、字體、邊距、邊框、動畫等，為網站創建一致且美觀的視覺效果。

CSS使用選擇器來定位HTML元素，並應用一組樣式規則。這些規則由屬性和值組成，用來定義元素的外觀。例如，可以使用color來改變文字顏色，使用font-size來調整字體大小。CSS還支持不同的單位，如像素（px）、百分比（%）和相對單位（em、rem）等。此外，CSS提供多種選擇器類型，包括元素選擇器、類選擇器、ID選擇器，以及更複雜的組合選擇器，能夠針對特定條件下的元素應用樣式。

CSS的樣式表可以內嵌於HTML文件內、外部連結（使用外部CSS文件），或直接嵌入於HTML標籤內（行內樣式）。外部樣式表允許開發者將同一套樣式應用到多個頁面，提高設計的一致性和可維護性。

範例：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>CSS 範例</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            background-color: #f0f8ff;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #4682b4;
            text-align: center;
            font-size: 36px;
        }
        p {
            color: #2e8b57;
            font-size: 18px;
            line-height: 1.6;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>CSS範例</h1>
    <p>這段文字展示如何使用CSS來控制段落的顏色、字體大小及行距。</p>
</body>
</html>

此範例展示了如何使用內嵌的<style>區塊來定義CSS樣式，為頁面添加背景色、控制標題和段落的字體樣式與顏色等。